<script setup>
import { ref } from 'vue'
import TypeSelecter from '@/components/TypeSelecter.vue'
import { RongZi_Types, 行业筛选, Product_Amount, 项目特色, 项目状态 } from '@/mock'

const group = ref([
  { title: '融资方式', options: RongZi_Types },
  { title: '融资金额', options: Product_Amount },
  { title: '项目特色', options: 项目特色 },
  { title: '项目状态', options: 项目状态 },
  { title: '行业筛选', options: 行业筛选 }
])
</script>
<template>
  <section
    class="w-full mx-auto flex flex-column justify-content-center align-items-center h-24rem bg-no-repeat bg-cover"
    style="background-image: url(/mock/tzmn.9861b08b.png)"
  >
    <span class="text-7xl mb-5 text-white">融资服务</span>
    <div class="flex jsutify-content-center gap-3 h-4rem">
      <InputText
        type="text"
        class="w-24rem"
        size="large"
        placeholder="输入金融机构名称或产品名称"
      />
      <Button icon="pi pi-search" class="w-4rem" size="large" aria-label="Search" />
    </div>
  </section>
  <section class="w-full bg-white mb-5">
    <section class="container mx-auto flex flex-column gap-3 py-2">
      <TypeSelecter
        v-for="(item, index) in group"
        :key="index"
        :title="item.title"
        :options="item.options"
      />
    </section>
  </section>
</template>
